<script lang="ts" setup name="systemDepartment">
import DepartmentTree from './DepartmentTree.vue';
import DepartmentDetail from './DepartmentDetail.vue';
const currentDepartmentId = ref<number>(0);
const currentDepartmentLabel = ref<string>('组织架构');
</script>
<template>
  <div class="wrapper">
    <el-card class="tree thin-card">
      <template #header>组织架构</template>
      <template #default>
        <DepartmentTree
          v-model:current-department-id="currentDepartmentId"
          v-model:current-department-label="currentDepartmentLabel"
        />
      </template>
    </el-card>
    <el-card class="detail thin-card">
      <template #header> {{ currentDepartmentLabel }} </template>
      <template #default v-if="currentDepartmentLabel === '组织架构'">组织架构 </template>
      <template #default v-else>
        <DepartmentDetail
          v-model:current-department-id="currentDepartmentId"
          v-model:current-department-label="currentDepartmentLabel"
      /></template>
    </el-card>
  </div>
</template>
<style lang="scss" scoped>
.wrapper {
  height: 100%;
  width: 100%;
  display: flex;

  .tree {
    flex: 2;
  }

  .detail {
    flex: 3;
  }
}
</style>
